<template>
  <div class="schedule h-100P flex-column">
    <QueryContainer @search="handleSearch" @reset="handleReset">
      <el-form :model="queryInfo" inline class="justify-between" ref="form">
        <el-form-item>
          <CustomButton title="新增班次" @click="handleEdit()"></CustomButton>
        </el-form-item>
        <el-form-item label="班次名称" prop="keyword">
          <el-input v-model="queryInfo.keyword" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </QueryContainer>
    <div class="flex-sub pd-20" style="max-height: 100vh">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column label="班次名称" prop="name"></el-table-column>
        <el-table-column label="时间规则">
          <template v-slot="{row:{endTime,startTime}}">
            <div>{{ `${startTime}~${endTime}` }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="{row}">
            <div class="justify-center">
              <div class="btn-edit fz-12" @click="handleEdit(row)">修改</div>
              <!--            <div class="pd-lr-10 fz-14" style="color: #333;">|</div>-->
              <!--            <div class="btn-edit" @click="handleOpenPlayer(scope.row)">打开视频流</div>-->
              <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
              <div class="btn-delete fz-12" @click="handleDelete(row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      :total="queryInfo.total"
      :page-size="queryInfo.pageSize"
      layout="total, prev, pager, next, jumper"
      :current-page="queryInfo.pageNo"
      @current-change="handleCurrentChange"
      hide-on-single-page
    />
    <saveOrUpdate :visible.sync="showSaveOrUpdate" :value="saveOrUpdateValue" @change="search"></saveOrUpdate>
  </div>
</template>

<script>
import QueryContainer from '@/components/query-container'
import {
  apiDelScheduleShiftTime,
  apiFindScheduleShiftTimeByParam
} from '@/views/schedule/api'
import { BusinessTypeEnum } from '@/consts'
import CustomButton from '@/components/custom-button'
import saveOrUpdate from './components/save-or-update'

export default {
  name: 'Schedule',
  components: { QueryContainer, CustomButton, saveOrUpdate },
  data() {
    return {
      queryInfo: {
        keyword: '',
        businessTypeEnum: BusinessTypeEnum.SECURITY,
        pageSize: 14,
        pageNo: 1,
        total: 0
      },
      loading: false,
      showSaveOrUpdate: false,
      tableData: [],
      saveOrUpdateValue: {}
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.search()
    },
    handleEdit(row) {
      this.showSaveOrUpdate = true
      if (row) {
        this.saveOrUpdateValue = row
      } else {
        this.saveOrUpdateValue = undefined
      }
    },
    handleSearch() {
      this.search()
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.search()
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        apiDelScheduleShiftTime(row).then(() => {
          this.$message.success('删除成功')
          this.handleSearch()
        })
      })
    },
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNo = currentPage
      this.handleSearch()
    },
    async search() {
      this.loading = true
      const { records, pageNo, pageSize, total } = await apiFindScheduleShiftTimeByParam(this.queryInfo)
      this.tableData = records
      this.queryInfo = {
        ...this.queryInfo,
        pageNo,
        pageSize,
        total
      }
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
